import React, { useState } from 'react';
import { axconst } from '@/shared/axconst';
import Create from './components/create';
import { AxStandardWideList } from '@/components/AxList/AxStandardWideList';
import { AxStandardCardButtonType, AxStandardCardFilterType } from '@/components/AxList/AxStandardLayout/data.d';

const Index: React.FC<any> = props => {
    const [createVisible, setCreateVisible] = useState(false);
    /** 配置列 */
    const columns = [
        {
            title: '充值信息',
            dataIndex: 'orgName0',
            width: axconst.width.long,
        },
        {
            title: '充值金额',
            dataIndex: 'orgName2',
            width: axconst.width.four,
        },
        {
            title: '经费名称',
            dataIndex: 'orgName6',
            width: axconst.width.four,
        },
        {
            title: '经费本编号',
            dataIndex: 'orgName7',
            width: axconst.width.four,
        },
        {
            title: '提交时间',
            dataIndex: 'orgName4',
            width: axconst.width.time,
        },
        {
            title: '状态',
            dataIndex: 'orgName5',
            width: axconst.width.twox,
        },
        {
            title: '充值说明',
            dataIndex: 'orgName3',
            width: axconst.width.remark,
        },
    ];

    const data = {
        list: [{
            id: 0,
            orgName0: '充值【探月工程】经费',
            orgName1: 'S32346',
            orgName2: '200000',
            orgName3: '第五次充值',
            orgName4: '2020-01-02 11:00:00',
            orgName5: '审核中',
            orgName6: '探月工程',
            orgName7: 'A5151212',
        }, {
            id: 1,
            orgName0: '充值【探火工程】经费',
            orgName1: 'S32347',
            orgName2: '300000',
            orgName3: '第六次充值',
            orgName4: '2020-01-03 11:00:00',
            orgName5: '已通过',
            orgName6: '探火工程',
            orgName7: 'A5151217',
        }]
    }

    const createProps = {
        visible: createVisible,
        handleVisible: setCreateVisible,
    };

    /** 配置操作按钮 */
    const button: AxStandardCardButtonType[] = [
        {
            text: '经费充值',
            icon: 'plus',
            onClick: () => setCreateVisible(true),
        },
    ];

    const filter: AxStandardCardFilterType[] = [];

    return (
        <>
            <AxStandardWideList
                columns={columns}
                button={button}
                data={data}
                filter={filter}
            />
            {createVisible && <Create {...createProps} />}
        </>
    );
};

export default Index;
